/* You can use CSS masks, With the 'mask' property, you create a mask that is applied to an element. */
background-color: red;
-webkit-mask-image: url(icon.svg);
mask-image: url(icon.svg);
<style>
.search_icon {
color: red;
fill: currentColor;
display: inline-block;
width: 100px;
height: 100px;
}
</style>
<span class="search_icon">
<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></svg>
</span>
Run code snippet<style type="text/css">
.myicon {
display: inline-block;
filter: invert(39%) sepia(16%) saturate(614%) hue-rotate(156deg) brightness(97%) contrast(89%);
}
.sidebar .nav-link:hover .myicon {
filter: brightness(0) invert(1);
}
</style>
<div class="sidebar">
<li class="nav-item">
<a class="nav-link" href="#"><img src="icon.svg" class="myicon"/> MyPage</a>
</li>
</div>
<!--Hex Color To CSS Filter Converter-->
https://isotropic.co/tool/hex-color-to-css-filter/